<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>姓名案例-计算属性实现</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
		<!--
			计算属性：
					定义：要用的属性不存在，要通过已有的属性计算得来
					原理：底层借助了 Object.defineProperty 方法提供的 getter 和 setter
					get 函数的执行时机：
							初次读取时会执行一次；当所依赖的数据发生改变时会再次调用
					优势：与 methods 实现相比，内部有缓存机制(复用)，效率更高，调试方便
					备注：计算属性最终胡出现在 vm 上，直接读取使用即可；
								如果计算属性要被修改，则必须写 set 函数去响应修改，
								且在 set 中要引起计算时所依赖的数据发生变化。
		-->
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstNmae"><br/>
        名：<input type="text" v-model="lastNmae"><br/>
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data: {
            firstNmae: '张',
            lastNmae: '三'
        },
        computed:{
						// 完整写法
            /*fullName:{
                // 当有人读取 fullName 时，get就会被调用，且返回值就作为 fullName 的值
                // get 的调用时机：
                //     初次读取 fullName 时
                //     所依赖的数据发生变化时 
                get(){
                  console.log(this) // 此处的 this 是 vm 
                  return this.firstNmae + '-' + this.lastNmae
                },
								// set 的调用时机:当计算属性值，例如 fullName 修改时 
								set(newName){
									console.log(this) // 此处的 this 是 vm 
									const arr = newName.split('-');
									this.firstNmae = arr[0]
									this.lastNmae = arr[1]
								}
            }*/
						// 当确定计算属性不会被修改时，可以简写成如下形式
						fullName(){
							// console.log(this) // 此处的 this 是 vm 
              return this.firstNmae + '-' + this.lastNmae
						}
        }
    })
</script>
</html>